<form [formGroup]="myForm">
    <div class="form-group">
      <br>
      <label for="id">产品号</label>
      <input type="text" class="form-control" id="id" name="id" [formControl]='id' placeholder="请输入产品号">
    </div>
    <div class="form-group">
      <label for="productName">产品名</label>
      <input type="text" class="form-control" id="productName" name="productName" [formControl]='productName'placeholder="请输入产品名">
    </div>
    <div class="form-group">
      <label for="productNum">产品数量</label>
      <input type="productNum" class="form-control" id="productNum" name="productNum" [formControl]='productNum'placeholder="请输入产品数量">
    </div>
  </form>
  
  <br>
  
  <div class="container">
    <div class="row">
      <div class="col-sm">
        <button type="button" class="btn btn-outline-success btn-block" (click)="add()">增加</button>
      </div>
      <div class="col-sm">
        <button type="button" class="btn btn-outline-primary btn-block" (click)="delete()">删除</button>
      </div>
      <div class="col-sm">
        <button type="button" class="btn btn-outline-danger btn-block" (click)="update()">修改</button>
      </div>
      <div class="col-sm">
        <button type="button" class="btn btn-outline-warning btn-block" (click)="search()">查询</button>
      </div>
    </div>
  </div>
  
  <br>
  
  <table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">序号</th>
        <th scope="col">产品号</th>
        <th scope="col">产品名</th>
        <th scope="col">产品数量</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor='let product of products$ | async; let i=index' (click)="select(product)">
        <th scope="row">{{i}}</th>
        <td>{{product.id}}</td>
        <td>{{product.productName}}</td>
        <td>{{product.productNum}}</td>
      </tr>
    </tbody>
  </table>